<template>
  <div class="commodity">
    <div class="commodity-title">
      订单管理
    </div>
    <div class="commodity-container">
      <a-input-search
        placeholder="搜索订单编号/商品编号/商品名称"
        style="width:300px;margin-top:16px;"
        v-model="keyWords"
        @search="onSearch"
      >
        <img slot="prefix" style="width:13px;" src="../../../assets/image/sellerHub/searchicon.png" alt="">
        <a-button slot="enterButton">
          搜索
        </a-button>
      </a-input-search>
      <span :class="isShowSearch?'commodity-menu':'commodity-menu commodity-menu-close'" @click="openMenu"><img :src="isShowSearch?require('../../../assets/image/sellerHub/menu.png'):require('../../../assets/image/sellerHub/menu_close.png')" alt=""></span>
      <a-button style="float:right;margin-top:16px;" slot="enterButton">
          <img style="width:14px;margin-right:7px;position:relative;top:-2px;" src="../../../assets/image/sellerHub/export.png" alt="">
          批量导出
      </a-button>
      <div class="commodity-search-box" v-if="isShowSearch">
        <span class="ant-popover-arrow search-box-arrow"></span>
        <a-form :form="form" style="overflow: hidden;">
        <div style="overflow:hidden;">
          <a-form-item label="订单时间:">
            <a-config-provider :locale="locale">
              <a-range-picker style="width:100%;" v-model="orderTime">
                <img slot="suffixIcon" src="../../../assets/image/sellerHub/calendar.png" alt="">
                <template slot="dateRender" slot-scope="current">
                  <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                    {{ current.date() }}
                  </div>
                </template>
              </a-range-picker>
            </a-config-provider>
          </a-form-item>
          <a-form-item label="订单状态:">
            <a-select
              v-model="orderStatus"
              placeholder="请选择"
            >
              <a-select-option value="1">
                已付款
              </a-select-option>
              <a-select-option value="2">
                已完成
              </a-select-option>
              <a-select-option value="3">
                已取消
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="配货状态:">
            <a-select
              v-model="distributionStatus"
              placeholder="请选择"
            ><!--配货状态 1待配货 2已配货 3待提货 4已提货-->
              <a-select-option value="1">
                待配货
              </a-select-option>
              <a-select-option value="2">
                已配货
              </a-select-option>
              <a-select-option value="3">
                待提货
              </a-select-option>
              <a-select-option value="4">
                已提货
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="配送方式:">
            <a-select
              v-model="sendStatus"
              placeholder="请选择"
            ><!--配送方式 1自提 2平台配送 3半日达 4极速达-->
              <a-select-option value="1">
                自提
              </a-select-option>
              <a-select-option value="2">
                平台配送
              </a-select-option>
              <a-select-option value="3">
                半日达
              </a-select-option>
              <a-select-option value="4">
                极速达
              </a-select-option>
            </a-select>
          </a-form-item>
          </div>
          <a-form-item label="买家:">
            <a-select
              v-model="tenantId"
              placeholder="请选择"
            >
              <a-select-option v-for="item in tenantArr"
                               :value="item.tenantId"
                               :key="item.id">
                {{item.tenantName}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="支付方式:">
            <a-select
              v-model="payMode"
              placeholder="请选择"
            ><!--支付方式 1微信支付 2支付宝支付 3银联支付-->
              <a-select-option value="1">
                微信支付
              </a-select-option>
              <a-select-option value="2">
                支付宝支付
              </a-select-option>
              <a-select-option value="3">
                银联支付
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-button @click="returnInit" style="position:absolute;bottom:16px;right:16px;border:none;box-shadow:none;">
              重置
          </a-button>
        </a-form>
      </div>
      <ul class="nav-list">
        <li v-for="(item, i) in navData" :class="{ 'li-checked' : goodsStatus === item.status }" :key="i" @click="checkNavList(i)">{{item.statusName}}<span style="margin-left:8px;">({{item.total}})</span></li>
      </ul>
      <a-row type="flex" class="table-title">
        <a-col :span="8" class="textOverflow" style="text-align:left;padding-left:12px;">
          商品
        </a-col>
        <a-col :span="2" class="textOverflow">
          单价(元)
        </a-col>
        <a-col :span="2" class="textOverflow">
          金额(元)/数量
        </a-col>
        <a-col :span="2" class="textOverflow">
          买家
        </a-col>
        <a-col :span="4" class="textOverflow">
          配货信息
        </a-col>
        <a-col :span="2" class="textOverflow">
          售后信息
        </a-col>
        <a-col :span="2" class="textOverflow">
          商品状态
        </a-col>
        <a-col :span="2" class="textOverflow">
          操作
        </a-col>
      </a-row>
      <div v-if="tableList&&tableList.length">
        <div class="table-items" v-for="(item, i) in tableList" :key="item.id">
          <div class="item-top">
            <p class="item-top-left">
              订单编号：{{item.subOrderNo}}
              <span>
               <a-popover>
                 <template slot="content" style="color:rgba(39,36,36,1)">
                   <span style="color:rgba(39,36,36,0.6)">支付流水号：</span>{{item.subSerialNo}}
                 </template>
                更多
              </a-popover>
            </span>
              订单日期：{{$dateTrans(item.orderTime).format('yyyy-MM-dd hh:mm:ss')}} <span class="item-log">{{item.deliveryType==1 ? '2S自提' : item.deliveryType==2 ? '平台配送':item.deliveryType==3 ? '半日达': '极速达'}}</span>
            </p>
            <p class="item-top-right">
              <span>
                <span v-if="item.payType==1"><img src="../../../assets/image/sellerHub/wechat.png" alt="">微信支付</span>
                <span v-if="item.payType==2"><img src="../../../assets/image/sellerHub/zhifubao.png" alt="">支付宝支付</span>
                <span v-if="item.payType==3"><img src="../../../assets/image/sellerHub/yinlian.png" alt="">银联支付</span>
              </span>
              <span><img src="../../../assets/image/sellerHub/price.png" alt="">￥{{item.realPaid}}</span>
              <span v-if="item.subStatus==6">已完成</span>
              <span v-if="item.subStatus==8" style="color: #272424;">已取消</span>
              <span v-if="item.subStatus==2||item.subStatus==3||item.subStatus==4||item.subStatus==5">已付款</span>
            </p>
          </div>
          <div class="item-container">
            <a-row type="flex">
              <a-col :span="12">
                <a-row type="flex" class="item-container-left"  v-for="(_item,index) in (item.commodityList||[])" :key="index+i"  align="middle">
                  <a-col :span="16" class="textOverflow">
                    <div class="order-table-name" style="text-align:left;">
                      <img class="dinghuo" src="../../../assets/image/sellerHub/dinghuo.png" alt="">
                      <img :src="_item.materialImg" alt="">
                      <div class="table-name-right" style="width: calc(100% - 60px);">
                        <div class="right-item">
                          <span class="textOverflow" style="max-width:60%" :title="_item.materialName">{{_item.materialName}}</span>
                          <em>|</em>
                          <i class="textOverflow" style="max-width:30%;" :title="_item.manufacturerPartNum">零件号:{{_item.manufacturerPartNum}}</i>
                        </div>
                        <div class="right-item textOverflow">
                          <span class="item-label">规格：</span>
                          <span>{{_item.specifications}}</span>
                        </div>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="4" class="textOverflow">
                    {{_item.price}}
                  </a-col>
                  <a-col :span="4" class="textOverflow" style="text-align:right;">
                    <p style="margin-right:13px;">{{_item.totalMoney}}</p>
                    <p style="margin-right:13px;">{{_item.quantity}}{{_item.unit}}</p>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="2" class="textOverflow border-right ">
                <div class="vertical-middle textOverflow" :title="item.tenantName">
                  {{item.tenantName}}
                </div>
              </a-col>
              <a-col :span="4" class="textOverflow border-right">
                <a-row type="flex" align="middle">
                  <a-col :span="24" class="textOverflow"  v-for="(_item,index) in item.logistics" :key="index+i">
                    <p class="textOverflow distributionNo">配货单号：{{_item.distributionNo}}</p><!--配货单号 0待配货 1已配货 2待提货 3已提货 4已收货（2S）-->
                    <p v-if="_item.state==0" class="distribution-status distribution-status-yellow">待配货</p>
                    <p v-if="_item.state==1" class="distribution-status distribution-status-green">已配货</p>
                    <p v-if="_item.state==2" class="distribution-status distribution-status-yellow">待提货</p>
                    <p v-if="_item.state==3" class="distribution-status distribution-status-green">已提货</p>
                    <p v-if="_item.state==4" class="distribution-status distribution-status-green">已收货</p>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="2" class="textOverflow border-right">
                <div class="vertical-middle">
                  --
                </div>
              </a-col>
              <a-col :span="2" class="textOverflow border-right">
                <div class="vertical-middle">
                  <p v-if="item.subStatus==5" class="distribution-status distribution-status-green">已发货</p>
                  <p v-if="item.subStatus==6" class="distribution-status distribution-status-green">已收货</p>
                  <p v-if="item.subStatus==8" class="distribution-status distribution-status-grey">已取消</p>
                  <p v-if="item.subStatus==2||item.subStatus==3||item.subStatus==4" class="distribution-status distribution-status-yellow">待发货</p>
                </div>
              </a-col>
              <a-col :span="2" class="textOverflow">
                <div class="vertical-middle">
                  <p class="edit-details-msg" @click="detailsMsg(item)"><img src="../../../assets/image/sellerHub/details_msg.png" alt="">查看详情</p>
                  <p class="edit-cancel">取消订单</p>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>

      <div class="nothing-img" v-else>
        <img src="../../../assets/image/sellerHub/nothing.png" alt="">
      </div>
      <div class="bottom-pagination">
        <pagination 
          style="float:right;margin:20px;" 
          @pageChange="pageChange"
          :total="total"
          :current="current">
        </pagination>
        <span class="paginationBefore">共 <i>{{total}}</i> 条</span>
      </div>
    </div>
    <OrderDetails v-model="isShowDrawer" :drawerData="drawerData"/>
  </div>
</template>
<script>
import Vue from 'vue'
import {Popover,Form,ConfigProvider} from 'ant-design-vue'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import OrderDetails from './components/orderDetails'
import Pagination from '@/components/common/pagination'
import Empty from './components/emptyImg'
Vue.use(Popover)
Vue.use(Form)
Vue.use(ConfigProvider)
export default {
  components:{OrderDetails,Pagination},
  data() {
    return {
      locale: zhCN,
      visible: false,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      total:0,//总条数
      current:1,//当前页
      isShowDrawer: false,//是否展示抽屉
      isShowSearch: true,//是否展示搜索
      navData: [
        { statusName: '全部',total:'',status:'' },
        { statusName: '待发货',total:'' ,status:1},
        { statusName: '已发货',total:'',status:2 },
        { statusName: '已收货',total:'',status:3 },
        { statusName: '已取消',total:'',status:4 },
      ],
      keyWords: '',
      drawerData:{},
      pageSize: 10,//列表每页展示数量
      pageNo:1,
      orderTime:[],//订单时间
      orderStatus:'',//订单状态
      distributionStatus: '',//配货状态
      goodsStatus:'',//商品状态
      sendStatus:'',//配送方式
      tenantId:'',//服务网点
      payMode:'',//支付方式
      tenantArr:[],
      tableList: []
    }
  },
  created() {
    this.init();
    this.tenantArrList()
  },
  computed: {
    _params() {
      //查询参数
      return {
        "deliveryType": this.sendStatus,
        "distributionStatus": this.distributionStatus,
        "orderEndTime": this.orderTime[1],
        "orderStartTime": this.orderTime[0],
        "pageNo": 1,
        "pageSize": 10,
        "payType": this.payMode,
        "materialStatus": this.orderStatus,
        "status": this.goodsStatus,
        "tenantId": this.tenantId
      }
    }
  },
  watch: {
    _params() {
      this.init();
    }
  },
  methods: {
    //获取服务网点
    tenantArrList () {
      this.$store.dispatch('request', this.$api.sellerCenter.getTenantList({ state: '-1' })).then(res => {
        console.log(res);
        this.tenantArr = res.result
      })

    },
    //数量统计
    getOrderCount(){
      this.$store.dispatch('request', this.$api.sellerCenter.getFourServiceOrderCount()
      ).then(res => {
        let result = res.result
        this.navData = [
          { statusName: '全部',total:result.all,status:'' },
          { statusName: '待发货',total:result.distribute,status:1},
          { statusName: '已发货',total:result.pick,status:2 },
          { statusName: '已收货',total:result.received,status:3 },
          { statusName: '已取消',total:result.cancel,status:4 },
        ]
      }).catch(() => {
      })
    },
    init(_page) {
      let params = {keyWords:this.keyWords, ...this._params}
      if(_page){
        params.pageNo = _page
      }
      //查询列表个数
      this.$store.dispatch('request', this.$api.sellerCenter.fourServicePage(params)
      ).then(res => {
        this.tableList = res.result.records.map(item => {
          let commodityList = item.commodityList || []
          for(let i=0;i<commodityList.length;i++){
            commodityList[i].materialImg = (commodityList[i].materialImg||'').split(',')[0]
          }
          item.logistics = item.logistics || []
          return item
        })
        this.total = res.result.total
      }).catch(() => {
      })
      //
      this.getOrderCount()
    },
    pageChange(_page) {
      //改变页码
      this.current = _page;
      this.pageNo = _page;
      this.init(_page);
    },
    checkNavList(i) {
      //选择商品状态
      this.goodsStatus = this.navData[i].status;
    },
    detailsMsg(data) {
      //抽屉---历史
      this.drawerData = data
      this.isShowDrawer = true;
    },
    openMenu() {
      //打开搜索页
      this.isShowSearch = !this.isShowSearch;
    },
    onSearch() {
      this.init();
    },
    getCurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = '1px solid #1890ff';
        style.borderRadius = '50%';
      }
      return style;
    },
    returnInit() {
      //重置
      this.orderTime = [];//订单时间
      this.orderStatus = '';//订单状态
      this.distributionStatus = '';//配货状态
      this.goodsStatus = '';//商品状态
      this.sendStatus = '';//配送方式
      this.tenantId = '';//服务网点
      this.payMode = '';//支付方式
    },
  },
}
</script>
<style lang="less">
  .distributionNo{
    max-width: 100%;
  }
ul,li,i,em,p{
  list-style: none;
  margin: 0;
  padding: 0;
  font-style:normal;
}
.textOverflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display:inline-block;
  vertical-align: middle;
  text-align: center;
}
.commodity {
  .commodity-title {
    width: 100%;
    height: 54px;
    line-height: 54px;
    padding-left: 24px;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
  }
  .commodity-container {
    background: #fff;
    margin: 16px;
    width: calc(100% - 32px);
    min-height: 800px;
    padding: 24px;
    overflow: hidden;
  }
  .commodity-menu {
    width: 32px;
    height: 32px;
    display: inline-block;
    background: rgba(215,55,55,0.08);
    margin-top: 16px;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    margin-left: 8px;
    border-radius: 2px;
    img {
      position: absolute;
      top: 8px;
      left: 8px;
    }
  }
  .commodity-menu-close {
    background: #f9f9f9;
  }
  .commodity-search-box {
    width: 100%;
    background: #ffffff;
    border-radius: 2px 0px 3px 0px 2px 2px 2px;
    box-shadow: 0px 0px 6px 1px rgba(39,36,36,0.08);
    margin-top: 16px; 
    position: relative;
    padding: 17px 9px 0;
  }
  .search-box-arrow {
    position: absolute;
    border-color: transparent #fff #fff transparent;
    box-shadow: -2px -2px 5px  rgba(0, 0, 0, 7%);
    left: 315px;
    background: #fff;
    width: 16px;
    height: 16px;
    top: -8px;
  }
  .ant-form-item {
    width: 16%;
    float: left;
    margin-left: 15px;
    .ant-form-item-label {
      line-height: 28px;
    }
  }
  .nav-list {
    width: 100%;
    border: 1px solid rgba(39,36,36,0.06);
    border-radius: 3px;
    height: 54px;
    line-height: 52px;
    margin-top: 16px;
    li {
      float: left;
      width: 107px;
      text-align: center;
      cursor: pointer;
      background: #f9f9f9;
      border-right: 1px solid #eeeeee;
    }
    li:hover {
      color: @activeRed;
      border-bottom: 1px solid #fff;
    }
    .li-checked {
      color: @activeRed;
      background: #fff;
      border-bottom: 1px solid #fff;
    }
  }
  .table-items {
  .item-top {
    background: #f9f9f9;
    border: 1px solid rgba(39,36,36,0.08);
    border-radius: 2px 2px 0 0;
    border-bottom: none;
    height: 52px;
    line-height: 52px;
  }
  .item-container {
    min-height: 92px;
    padding: 16px 0;
    margin-bottom: 16px;
    border: 1px solid rgba(39,36,36,0.08);
    border-radius: 0 0 2px 2px;
  }
  .item-container-left {
    border-right: 1px solid rgba(39,36,36,0.06);
    border-top: 1px solid rgba(39,36,36,0.06);
    height: 76px;
    padding-bottom: 16px;
  }
  .item-container-left:first-child{
    border-top: none;
  }
  .item-container-left:last-child{
    padding: 0;
    height: 60px;
  }
  .border-right {
    border-right: 1px solid rgba(39,36,36,0.06);
  }
  .item-top-left {
    padding-left: 24px;
    float: left;
    span {
      color: @activeRed; 
      margin-left: 8px;
      margin-right: 33px;
    }
    span:first-child {
      cursor: pointer;
    }
    .item-log {
      margin-left: 16px;
      display: inline-block;
      background: rgba(215,55,55,0.08);
      border-radius: 8px 0px 8px 0px;
      margin-top: 13px;
      height: 26px;
      line-height: 26px;
      padding: 0 8px;
    }
  }
  .item-top-right {
    float: right;
    position: relative;
    span>img {
      width: 16px;
      margin-right: 8px;
    }
    span:nth-of-type(2) {
      margin-left: 33px;
      margin-right: 160px;
      color: @activeRed; 
    }
    span:last-child {
      background: url('../../../assets/image/sellerHub/status_bg.png') no-repeat center top;
      background-size: 100% 100%;
      width: 124px;
      height: 46px;
      display: inline-block;
      position: absolute;
      top: -3px;
      right: 0;
      text-align: center;
      line-height: 46px;
      font-size: 16px;
      color: #79c860;
    }
  }
}
}
.bottom-pagination>.paginationBefore {
  float: right;
  line-height: 70px;
  i {
    color: @activeRed;
  }
}
.bottom-pagination {
  position: fixed;
  bottom: 0;
  width: calc(100% - 178px);
  background: #fff;
  right: 0;
  box-shadow: 0px -2px 2px 0px rgba(39,36,36,0.02); 
  padding-right: 30px;
}
.table-title {
  height: 48px;
  line-height: 48px;
  background: #f9f9f9;
  margin: 16px 0 12px;
  font-size: 14px;
  font-weight: 500;
}

.order-table-name {
  margin-left: 24px;
  position: relative;
  img {
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(34,49,77,0.08);
  }
  .dinghuo {
    width: 40px;
    height: 16px;
    position: absolute;
    top: 44px;
    left: 20px;
  }
  .table-name-right {
    width: 223px;
    text-align: left;
    margin-left: 12px;
    color: rgba(39,36,36,1);
    display: inline-block;
    vertical-align: middle;
    .right-item {
      text-align: left;
      display: block;
      height: 28px;
      line-height: 28px;
      i {
        height: 20px;
        display: inline-block;
        line-height: 20px;
      }
      em {
        color: #f2f2f2;
        margin: 0 8px;
        position: relative;
        top: -1px;
      }
      .item-label {
        color: rgba(39,36,36,0.6);
      }
    }
  }
}
.item-distribution{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.vertical-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 100%;
}
.distribution-status {
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 12px;
  width: 52px;
  border-radius: 2px;
}
.distribution-status-green {
  background: rgba(121,200,96,0.08);
  color: #79c860;
}
.distribution-status-yellow {
  background: rgba(255,144,3,0.08);
  color: #ff9003;
}
.distribution-status-grey {
  background: rgba(248,248,248,1);
  color: rgba(39,36,36,0.3);
}
.distribution-status-cancel {
  background: rgba(248,248,248,1);
  color: rgba(39,36,36,1);
}
.edit-details-msg {
  cursor: pointer;
  img {
    width: 16px;
    display: inline-block;
    margin-right: 8px;
  }
  color: #272424;
}
.edit-cancel {
  width: 80px;
  line-height: 24px;
  height: 24px;
}
.nothing-img {
  width: 100%;
  text-align: center;
  img {
    display: inline-block;
    width: 160px;
    margin: 40px 0;
  }
}
</style>